<template>
  <vue-tab current="index"></vue-tab>
  <div class="sec-top">
    <vue-cgb-new></vue-cgb-new>
  </div>
  <table class="table table-bordered table-hover">
    <caption>存股宝列表</caption>
    <thead>
      <tr>
        <th>ID<br>代号<br>股票代码<br>发布时间</th>
        <th>起购金额</th>
        <th class="col-xs-1">收益</th>
        <th class="col-xs-1">豆腐块图片</th>
        <th class="col-xs-1">详情图片</th>
        <th class="col-xs-1">股票Logo</th>
        <th class="col-xs-1">分享</th>
        <th class="text-center col-nowrap">首页显示<br>有效状态</th>
        <th class="col-nowrap">栏目</th>
        <th class="col-xs-1">描述</th>
        <th class="text-right">排序</th>
        <th class="text-right">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in list">
        <td class="col-nowrap">
          ID: {{item.id}}<br>
          {{item.name}}<br>
          {{item.code}}<br>
          {{item.publishTime | timeToString}}
        </td>
        <td class="col-nowrap">
          金贝塔: {{item.leastMoney}}<br>
          财富号: {{item.investmentAmount}}
        </td>
        <td>{{item.increase}}</td>
        <td><img :src="item.blockPicUrl"></td>
        <td><img :src="item.picUrl"></td>
        <td><img :src="item.logoPicUrl"></td>
        <td>标题：{{item.shareTitle}}<br>内容：{{item.shareContent}}<br><img :src="item.sharePicUrl"></td>
        <td class="text-center">{{+item.homeShow === 1 ? '显示' : '不显示'}}<br>{{+item.status === 1 ? '有效' : '失效'}}</td>
        <td>{{item.articleTopicId}}</td>
        <td>{{item.description}}</td>
        <td class="text-right col-nowrap">
          <button class="btn btn-sm btn-success" v-if=" $index > 0 " @click="swap(item.id, list[$index - 1].id)">上移</button>
          <button class="btn btn-sm btn-success" v-if=" $index < list.length - 1" @click="swap(item.id, list[$index + 1].id)">下移</button>
          <button class="btn btn-sm" v-if=" $index >= list.length - 1 " :style="{ opacity: 0, 'pointer-events': 'none' }">占位</button>
        </td>
        <td class="text-right col-nowrap">
          <a :href="item.location" target="_blank" class="btn btn-sm btn-default">详情链接</a>
          <vue-cgb-update :cgb="item"></vue-cgb-update>
        </td>
      </tr>
    </tbody>
  </table>
  <vue-pages :pages.sync="pages" :get-list="getList"></vue-pages>
</template>
<style src="./cgb-list.css" scoped></style>
<script src="./cgb-list.js"></script>